<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200px">
    <el-table v-loading="loading" :data="list" border stripe
      :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
      <el-table-column label="车牌号" align="center" prop="vehicleNo" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="司机姓名" align="center" prop="driverName" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="电话" align="center" prop="driverPhone" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="车辆状态" align="center" prop="vehicleStatus" min-width="100" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span class="status" :class="statusStyle(row.vehicleStatus)"></span>
          <span :class="textStyle(row.vehicleStatus)">{{getDictLabel(DICT_TYPE.DRIVER_VEHICLE_STATUS,
            row.vehicleStatus?.toString())}}</span>
        </template>
      </el-table-column>
      <el-table-column label="司机状态" align="center" prop="driverStatus" min-width="100" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span class="status" :class="statusStyle(row.driverStatus)"></span>
          <span :class="textStyle(row.driverStatus)">{{getDictLabel(DICT_TYPE.DRIVER_VEHICLE_STATUS,
            row.driverStatus?.toString())}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" min-width="250" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <el-container v-if="!row.isEdit" class="items-center">
            <span class="flex-1 w-0 overflow-ellipsis overflow-hidden">{{row.remark}}</span>
            <el-tooltip effect="dark" content="编辑" placement="left">
              <el-icon :size="18" class="cursor-pointer ml-10px" @click="remarkEditChange(row)">
                <EditPen />
              </el-icon>
            </el-tooltip>
          </el-container>
          <el-container v-else class="items-center">
            <el-input v-model="row.remark" :maxlength="100" show-word-limit placeholder="请输入备注信息" class="!w-full" />
            <el-tooltip effect="dark" content="保存" placement="left">
              <el-icon :size="18" class="cursor-pointer ml-10px" @click="saveRemark(row)">
                <Check />
              </el-icon>
            </el-tooltip>
          </el-container>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80" fixed="right">
        <template #default="{ row }">
          <el-button v-hasPermi="['line:VehicleDelete']" type="danger" link @click="deleteFn(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="h-62px">
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getVehiclesById" />
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
  import { getTenantId } from '@/utils/auth'
  import { DICT_TYPE, getDictLabel } from '@/utils/dict'
  import * as lineManageApi from '@/api/transportation/lineManage'

  const dialogTitle = ref()
  const dialogVisible = ref(false)
  const message = useMessage()
  const loading = ref(false)
  const list = ref([])
  const total = ref(0)
  const queryParams = ref({
    routeId: undefined,
    pageNo: 1,
    pageSize: 10
  })

  const statusStyle = computed(() => {
    return (status) => {
      return status === 0 ? 'idle' : 'busy'
    }
  })

  const textStyle = computed(() => {
    return (status) => {
      return status === 0 ? 'color-idle' : 'color-busy'
    }
  })


  const open = async (row) => {
    list.value = []
    total.value = 0
    dialogVisible.value = true
    queryParams.value.pageNo = 1
    queryParams.value.routeId = row.id
    dialogTitle.value = row.routeName
    getVehiclesById()
  }

  const getVehiclesById = async () => {
    const res = await lineManageApi.getVehiclesById(queryParams.value)
    list.value = res.list || []
    total.value = res.total || 0
  }

  const remarkEditChange = (row) => {
    row.isEdit = !row.isEdit
  }

  const saveRemark = async (row) => {
    await lineManageApi.updateRouteVehicle(row)
    message.success('操作成功')
    queryParams.value.pageNo = 1
    getVehiclesById()
  }

  const deleteFn = async (id) => {
    await message.confirm('您确认删除吗？')
    await lineManageApi.deleteRouteVehicleById({ id })
    message.success('操作成功')
    queryParams.value.pageNo = 1
    getVehiclesById()
  }

  defineExpose({ open })
</script>
<style lang="scss" scoped>
  :deep(.el-input__wrapper) {
    padding: 0 !important;
    height: 22px !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .color-idle {
    color: #409EFE;
  }

  .color-busy {
    color: #F78600;
  }

  .idle {
    background-color: rgba(40, 147, 255, 0.3);

    &::after {
      background-color: #409EFE;
    }
  }

  .busy {
    background-color: rgba(247, 134, 0, 0.3);

    &::after {
      background-color: #F78600;
    }
  }

  .status {
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-right: 4px;

    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 2px;
      left: 2px;
      width: 6px;
      height: 6px;
      border-radius: 3px;
    }
  }
</style>